<template>
  <div>
    <!-- 头部搜索框 -->
    <el-form :inline="true"
             :model="formInline"
             class="demo-form-inline headerForm">
      <el-form-item label="店铺ID/名称:">
        <el-input v-model="formInline.shop_name"
                  placeholder="搜索店铺ID/名称"></el-input>
      </el-form-item>
      <el-form-item label="优惠券:">
        <el-input v-model="formInline.coupon_name"
                  placeholder="优惠券名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small"
                   @click="inquireList()">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small"
                   @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 夹缝中求生的  新增按钮 -->
    <el-row :gutter="20"
            class="one_row">
      <el-col :span="4"
              :offset="15">
        <div class="grant_sum">发放总数量:{{totalNum}}张</div>
      </el-col>
      <el-col :span="4"
              :offset="1">
        <div class="get_totalMoney">领取总金额:{{totalMoney}}元</div>
      </el-col>
    </el-row>

    <!-- 主题内容区域 -->
    <el-table :data="tableData"
              border
              style="width: 100%">
      <el-table-column prop="shop_id"
                       width="140px"
                       label="店铺ID"></el-table-column>
      <el-table-column prop="shop_name"
                       label="店铺名称"></el-table-column>
      <el-table-column prop="coupon_name"
                       width="140px"
                       label="优惠券名称"></el-table-column>
      <el-table-column prop="coupon_value"
                       width="140px"
                       label="优惠券金额/元"></el-table-column>
      <el-table-column prop="coupon_limit"
                       width="140px"
                       label="使用金额限制"></el-table-column>
      <el-table-column prop="coupon_timeLimit"
                       width="140px"
                       label="使用时限/天"></el-table-column>
      <el-table-column prop
                       width="140px"
                       label="发放总数量/张">100</el-table-column>
      <el-table-column prop="coupon_num"
                       width="140px"
                       label="领取金额/元"></el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination layout="prev, pager, next"
                   :total="total"></el-pagination>
  </div>
</template>

<script>
import { setItem, getItem } from '@/utils/storage'
import '@/mock/mock-zp'
export default {
  data () {
    return {
      // 头部搜索数据
      formInline: {
        shop_name: '',
        coupon_name: '',
      },
      // 夹缝  总数量
      totalNum: '1000',
      // 夹缝  总金额
      totalMoney: 'xxxx',
      // 表单渲染数据
      tableData: [],
      // 分页器
      total: 1,
      // 搜索对应数据时 操作的数组
      inquireCouponArr: [],
    }
  },
  created () {
    this.getShopList()
  },
  methods: {
    // 获取数据
    async getShopList () {
      const { data: res } = await this.$http.get('/shop')
      // console.log(res)

      this.tableData = res.data
      console.log(this.tableData)

      setItem('shopCoupon', this.tableData)

      // 获取数据的时候  计算总领取金额
      var num = 0
      res.data.forEach((item) => {
        num += item.coupon_num.substr(0, item.coupon_num.length - 1) - 0
      })
      this.totalMoney = num
    },
    // 重置 搜索表单
    resetForm () {
      this.formInline.shop_name = ''
      this.formInline.coupon_name = ''
      this.tableData = getItem('shopCoupon')
    },
    // 按需搜索并渲染对应的数据
    inquireList () {
      this.inquireCouponArr = getItem('shopCoupon')
      this.tableData = this.inquireCouponArr
      if (
        this.formInline.shop_name.length === 0 &&
        this.formInline.coupon_name.length === 0
      ) {
        this.tableData = this.inquireCouponArr
        return '0'
      }
      if (
        this.formInline.shop_name.length > 0 &&
        this.formInline.coupon_name.length > 0
      ) {
        const queryResults = this.tableData.filter((item, index) => {
          return (
            (this.formInline.shop_name === item.shop_id &&
              this.formInline.coupon_name === item.coupon_name) ||
            (this.formInline.shop_name === item.shop_name &&
              this.formInline.coupon_name === item.coupon_name)
          )
        })
        this.tableData = queryResults
      } else {
        const queryResults = this.tableData.filter((item, index) => {
          return (
            this.formInline.shop_name === item.shop_id ||
            this.formInline.shop_name === item.shop_name ||
            this.formInline.coupon_name === item.coupon_name
          )
        })
        this.tableData = queryResults
      }
    },
  },
}
</script>

<style lang="less" scoped>
.headerForm {
  // position: absolute;
  width: 96%;
  height: 60px;
  border: 1px solid #000;
  border-radius: 10px;
  > div {
    padding: 0 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
}

.one_row {
  margin: 15px 0;
}

.el-pagination {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 30px;
}
</style>
